<template>
  <div>
    <el-form :inline="true" :model="Cha" class="demo-form-inline">
      <el-form-item label="车牌号">
        <el-input v-model="Cha.chepaihao"></el-input>
      </el-form-item>
    
    <el-form-item label="事故日期">
        <el-col :span="18">
          <el-form-item prop="date1">
          <el-input type="date" v-model="Cha.riqi"></el-input>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="轮胎品牌">
        <el-input v-model="Cha.pinpai"></el-input>
      </el-form-item>
    
           <el-form-item label="规格">
        <el-input v-model="Cha.guige"></el-input>
      </el-form-item>
      
           <el-form-item label="使用人">
        <el-input v-model="Cha.shiyongren"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="LuntaiPage">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button type="danger" @click="Luntaipidelete()">批量删除</el-button>
    <el-button type="danger" @click="XiaoAdd()">新增</el-button>
    <el-table ref="yingpi" :data="tableData" style="width: 100%">
      <el-table-column type="selection" width="55"> </el-table-column>

      

     

      <el-table-column label="车牌号" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.chepaihao }}</span>
        </template>
      </el-table-column>
      <el-table-column label="轮胎品牌" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.pinpai }}</span>
        </template>
      </el-table-column>

     <el-table-column label="规格" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.guige }}</span>
        </template>
      </el-table-column>

     

      <el-table-column label="数量" width="180">
        <template slot-scope="scope">
         
          <span  style="margin-left: 10px">{{ scope.row.shuliang }}</span>
        </template>
      </el-table-column>
        <el-table-column label="使用人" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.shiyongren }}</span>
        </template>
      </el-table-column>
       <el-table-column label="使用日期" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.riqi }}</span>
        </template>
      </el-table-column>

      <el-table-column label="备注" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.beizhu}}</span>
        </template>
      </el-table-column>
       
     
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="LuntaiEdit(scope.row.id)"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="LuntaiDelete(scope.row.id)"
            >删除</el-button
          >
        
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="Cha.page"
      :limit.sync="Cha.maxResultCount"
      :pageSizes="[2, 4, 6, 8]"
      @pagination="LuntaiPage"
    />
    <!--应收添加-->
    <el-dialog title="提示" :visible.sync="YingAddShow" width="30%">
      <el-form ref="form" :model="XianList" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="车牌号">
              <el-input v-model="XianList.chepaihao"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      
       
      
        <el-row>
          <el-col :span="12">
            <el-form-item label="轮胎品牌">
              <el-input v-model="XianList.pinpai"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="规格">
              <el-input v-model="XianList.guige"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      
        <el-row>
          <el-col :span="12">
            <el-form-item label="数量" >
              <el-input type="number" v-model="XianList.shuliang"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
       
     
        <el-row>
          <el-col :span="12">
            <el-form-item label="使用人">
              <el-input v-model="XianList.shiyongren"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
         <el-row>
          <el-col :span="12">
            <el-form-item label="使用日期">
              <el-input type="date" v-model="XianList.riqi"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="XianList.beizhu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

    

        <el-form-item>
          <el-button type="primary" @click="LuntaiBao()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--应收编辑-->
    <el-dialog title="提示" :visible.sync="YingEintShow" width="30%">
      <el-form ref="form" :model="YingTable" label-width="80px">
      <el-row>
          <el-col :span="12">
            <el-form-item label="车牌号">
              <el-input v-model="YingTable.chepaihao"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      
       
      
        <el-row>
          <el-col :span="12">
            <el-form-item label="轮胎品牌">
              <el-input v-model="YingTable.pinpai"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="规格">
              <el-input v-model="YingTable.guige"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      
        <el-row>
          <el-col :span="12">
            <el-form-item label="数量" >
              <el-input type="number" v-model="YingTable.shuliang"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
       
     
        <el-row>
          <el-col :span="12">
            <el-form-item label="使用人">
              <el-input v-model="YingTable.shiyongren"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
         <el-row>
          <el-col :span="12">
            <el-form-item label="使用日期">
              <el-input type="date" v-model="YingTable.riqi"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input v-model="YingTable.beizhu"></el-input>
            </el-form-item>
          </el-col>
        </el-row>


        <el-form-item>
          <el-button type="primary" @click="LuntaiEintBao()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  LuntaiPages, //查询
  Luntaipideletes, //批删
  LuntaiDeletes, //单删
  LuntaiBaos, //添加
  LuntaiEdits, //反填
  LuntaiEintBaos, //保存
  
} from "@/api/system_base/Weihu"; //引入apijs
import Pagination from "@/components/Pagination"; // 引入分页组件
export default {
  components: { Pagination },
  data() {
    return {
      YingEintShow: false,
      YingAddShow: false,
      total: 0,
      tableData: [],

      Cha: {
        chepaihao:"",
        pinpai: "",
        guige:"",
        shiyongren: "",
        riqi:"",
        page: 1, //当前页
        maxResultCount: 2, //每页几条
        skipCount: 0, //用于api接口  第一条数据位置
      },
      XianList: {
        chepaihao: "",
       pinpai:"",
        guige: "",
        shuliang: "",
        shiyongren: "",
        riqi: "",
        beizhu: "",
    
      },
      YingTable: {
         chepaihao: "",
       pinpai:"",
        guige: "",
        shuliang: "",
        shiyongren: "",
        riqi: "",
        beizhu: "",
      },
    };
  },
  created() {
    this.LuntaiPage();
  },
  methods: {
    
    //修改保存
    LuntaiEintBao() {
      if(this.YingTable.chepaihao=="")
      {
        this.$message("车牌号不能空");
        return;
      }
       if(this.YingTable.pinpai=="")
      {
        this.$message("轮胎品牌不能空");
        return;
      }
       if(this.YingTable.guige=="")
      {
        this.$message("规格不能空");
        return;
      }
        if (this.YingTable.shuliang == "" || this.YingTable.shuliang <= 0) {
        this.$message("数量不能空或者数值范围不正确");
        return;
      }

 if(this.YingTable.shiyongren=="")
      {
        this.$message("使用人不能空");
        return;
      }

 if(this.YingTable.riqi=="")
      {
        this.$message("使用日期不能空");
        return;
      }

 if(this.YingTable.beizhu=="")
      {
        this.$message("备注不能空");
        return;
      }



    
      LuntaiEintBaos(this.YingTable).then((r) => {
        this.$message("修改成功");
        this.YingEintShow = false;
        this.LuntaiPage();
      });
    },
    //反填
    LuntaiEdit(id) {
      this.YingEintShow = true;
      LuntaiEdits(id).then((r) => {
          var that=this;
       var aa= r.result;
       that.YingTable=aa;
       that.YingTable.riqi=that.YingTable.riqi.substring(10,0);
       
      });
    },
    //添加保存
    LuntaiBao() {
      
    if(this.XianList.chepaihao=="")
      {
        this.$message("车牌号不能空");
        return;
      }
       if(this.XianList.pinpai=="")
      {
        this.$message("轮胎品牌不能空");
        return;
      }
       if(this.XianList.guige=="")
      {
        this.$message("规格不能空");
        return;
      }
        if (this.XianList.shuliang == "" || this.XianList.shuliang <= 0) {
        this.$message("数量不能空或者数值范围不正确");
        return;
      }

 if(this.XianList.shiyongren=="")
      {
        this.$message("使用人不能空");
        return;
      }

 if(this.XianList.riqi=="")
      {
        this.$message("使用日期不能空");
        return;
      }

 if(this.XianList.beizhu=="")
      {
        this.$message("备注不能空");
        return;
      }

    
      LuntaiBaos(this.XianList).then((r) => {
        this.$message("添加成功");
        this.YingAddShow = false;
        this.LuntaiPage();
      });
    },
    XiaoAdd() {
       
      this.YingAddShow = true;
      
    },
    //单删
    LuntaiDelete(id) {
      if (confirm("确认要删除吗")) {
        LuntaiDeletes(id).then((r) => {
          this.$message("删除成功");
          this.LuntaiPage();
        });
      }
    },
    //批量删除
    Luntaipidelete() {
      var arrid = [];
      var id = this.$refs.yingpi.selection;
      id.forEach((r) => {
        arrid.push(r.id);
      });
      if (confirm("确认删除吗")) {
        arrid.forEach((r) => {
          Luntaipideletes(r).then((r) => {});
          this.$message("批删成功");
          this.LuntaiPage();
        });
      }
    },

    //查询
    LuntaiPage() {
      this.listLoading = true;
      this.Cha.skipCount = (this.Cha.page - 1) * this.Cha.maxResultCount;

      LuntaiPages(this.Cha).then((r) => {
        if (r.result.items != null) {
          var that = this;
          that.tableData = r.result.items;
          this.listLoading = false; // 隐藏加载效果
          this.total = r.result.totalCount;
        }
      });
    },
    ChaLuntaiPage() {
      this.Cha.page = 1;
      this.LuntaiPage();
    },
  },
};
</script>